<template>
	<div>
		<div>
       <tab :line-width=2 active-color='#fc378c' v-model="index">
        <tab-item class="vux-center" :selected="demo2 === item" v-for="(item, index) in list2" @click="demo2 = item" :key="index">{{item}}</tab-item>
      </tab>
      <swiper v-model="index" height="300px" :show-dots="false">
        <swiper-item v-for="(item, index) in list2" :key="index">
          <div class="tab-swiper vux-center"></div>
	  
<div v-if="index==0">
			<x-input 
					title="姓名"
     :show-clear=true 
     placeholder="张山"></x-input><x-input 
     title="身份证号"
     :show-clear=true 
     placeholder="0000000"></x-input>
<x-button type="warn" @click.native="showingnext">下一步1</x-button>
		</div>
<div v-if="index==1">
			<x-input 
     title="银行卡号"
     :show-clear=true 
     placeholder="0000000"></x-input><x-input 
     title="银行预留的手机号:"
     :show-clear=true 
     placeholder="0000000"></x-input>
<!-- <x&#45;input  -->
<!--      title="验证码" -->
<!--      :show&#45;clear=true  -->
<!--      placeholder="请填写6位验证码"></x&#45;input> -->
<x-button @click.native="gocheck" type="warn">认证</x-button>
	<x-button  v-if="demo2 == '认证'" type="warn"><span >下一步</span></x-button>	</div>


        </swiper-item>
      </swiper>
    </div>
		<!-- <h3 style="text&#45;align:center">{{demo1}}</h3> -->
		<!-- <tab :line&#45;width="2" active&#45;color="#fc378c"> -->
		<!--   <!&#45;&#45; <tab&#38;#45;item :selected="demo2 === item" v&#38;#45;for="item in list2" @click="demo2 = item">{{item}}</tab&#38;#45;item> &#45;&#45;> -->
		<!--     <tab&#45;item :selected="demo1 === ' 身份认证'" @click="demo1 = '身份认证'">身份认证</tab&#45;item> -->
		<!--     <tab&#45;item :selected="demo1 === '银行卡绑定'" @click="demo1 = '银行卡绑定'">银行卡绑定</tab&#45;item> -->
		<!-- </tab> -->
		<!-- <div  v&#45;if="currentIndex==0" id="hook&#45;arguments&#45;example" v&#45;demo:foo.a.b="message"></div> -->
		<!-- <div v&#45;color&#45;swatch:"blue" :class="{ myblue: isColor }">mmmmmmmmm</div> -->
		<!-- <div  v&#45;bind:class="{ myblue: isColor }">oooooooi</div> -->
		<!-- <div  v&#45;color&#45;swatch:ired="vcolor">oooooooi</div> -->
<!-- 		<div v&#45;if="!shownext"> -->
<!-- 			<x&#45;input  -->
<!-- 					title="姓名" -->
<!--      :show&#45;clear=true  -->
<!--      placeholder="张山"></x&#45;input><x&#45;input  -->
<!--      title="身份证号" -->
<!--      :show&#45;clear=true  -->
<!--      placeholder="0000000"></x&#45;input> -->
<!-- <x&#45;button type="warn" @click.native="showingnext">下一步1</x&#45;button> -->
<!-- 		</div> -->
<!-- <div v&#45;if="shownext"> -->
<!-- 			<x&#45;input  -->
<!--      title="银行卡号" -->
<!--      :show&#45;clear=true  -->
<!--      placeholder="0000000"></x&#45;input><x&#45;input  -->
<!--      title="银行预留的手机号:" -->
<!--      :show&#45;clear=true  -->
<!--      placeholder="0000000"></x&#45;input> -->
<!-- <!&#45;&#45; <x&#38;#45;input  &#45;&#45;> -->
<!-- <!&#45;&#45;      title="验证码" &#45;&#45;> -->
<!-- <!&#45;&#45;      :show&#38;#45;clear=true  &#45;&#45;> -->
<!-- <!&#45;&#45;      placeholder="请填写6位验证码"></x&#38;#45;input> &#45;&#45;> -->
<!-- <x&#45;button @click.native="gocheck" type="warn">认证</x&#45;button> -->
<!-- 	<x&#45;button  v&#45;if="demo2 == '认证'" type="warn"><span >下一步</span></x&#45;button>	</div> -->
	</div>
</template>
    <style>
    .myblue {
	    width:40vw;
	    height:10vh;
	    border:1px solid blue;
	    background:#343 ;
	    color: #fff;
    }
    </style>
    <script>
    import Vue from 'vue'

import { XButton, XInput, Tab, TabItem,Swiper ,SwiperItem} from './index.js'
export default {
    data() {
	    return {
	   message:"ok" ,
	    isColor: true,
		    index:0,
	    vcolor:"red",
	 shownext:false,
	demo1:"身份认证", 
	demo2: '身份认证',
      list2: [ '身份认证', '银行卡绑定'],
	bankData:{
		bankMobile:"2123"
	}
	    }
    },
	watch: {
	  shownext :function(){
		  if(this.demo1=="身份认证"){return false}
	  }	
	},
	computed:{
           registing(){
	   }	    
	},
	components:{
		XButton,
		XInput,
		Tab,
		TabItem,
		Swiper,
		SwiperItem
	},
	methods:{
		gocheck (){
			console.log(this.$store.state.rests.verifyCard.url)
		let ca = {"identityName":"222","identityNo":"233","bankCardNo":"33"}
			this.$http.post(this.$store.state.rests.verifyCard.url, ca,{headers: {
        merchantSessionId: '6974abcb-d43d-4679-81e8-33edf42c9343'
    }}).then(res => {

                     console.error(res);
				console.error('eeeeeee');
		if(res.body.returnCode == 0)
				console.error('eeeeeee');
		{
			this.$router.push('/businessman')
		}
			})//post
		},
		showingnext (){
			this.shownext = true
			this.demo1 = "银行卡绑定"
		}
	}

}
Vue.directive('color-swatch',function (el,binding) {
	el.style.backgroundColor = binding.value,
		el.innerHTML = `${binding.value}  ${binding.expression}   ${binding.name}  ${binding.arg}`
})
Vue.directive('demo', {
        bind: function(el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
                'name: ' + s(binding.name) + '<br>' +
                'value: ' + s(binding.value) + '<br>' +
                'expression: ' + s(binding.expression) + '<br>' +
                'argument: ' + s(binding.arg) + '<br>' +
                'modifiers: ' + s(binding.modifiers) + '<br>' +
                'vnode keys: ' + Object.keys(vnode).join(', ')
        }
    }) 
    </script>
